<template>
	<SetCard>
		<template #title>
			<p class="font-bold text-20px text-#000000">
				偏好设置
			</p>
		</template>
		<template #default>
			<div>
				<div v-for="(item, index) in settings" :key="index" class="flex items-center justify-between pt-20px pb-20px border-b-1px border-#E5E6EB border-solid">
					<div class="flex items-center">
						<div>
							<p class="text-16px text-#000000 mb-6px">{{ item.title }}</p>
							<p class="text-14px text-#B5B5B5">{{ item.desc }}</p>
						</div>
					</div>
					<div class="flex items-center">
						<el-button color="#E5E6EB"
							style="color:#000000;width:80px;height:40px;font-size: 14px;border-radius:10px;"
							@click="clickModify(item.id)">
							修改
						</el-button>
					</div>
				</div>
			</div>
		</template>
	</SetCard>
	<LanguageSwitch :is-show="showLanguageSwitch"
	@close="closeLanguageSwitch" @confirm="confirmLanguageSwitch"></LanguageSwitch>

	<ChangeZone :is-show="showChangeZone"
	@close="closeChangeZone" @confirm="confirmChangeZone"></ChangeZone>

	<ColorChange :is-show="showColorChange" @close="closeColorChange"
	@confirm="confirmColorChange"></ColorChange>

	<CurrencySettings :is-show="showCurrencySettings"
	@close="closeCurrencySettings"
	@confirm="confirmCurrencySettings"></CurrencySettings>
</template>
<script setup lang="ts">
import SetCard from './SetCard.vue';
import LanguageSwitch from '../pop/LanguageSwitching.vue';
import ChangeZone from '../pop/ChangeZone.vue';
import ColorChange from '../pop/ColorChange.vue';
import CurrencySettings from '../pop/CurrencySettings.vue';
// 控制语言切换弹窗
const showLanguageSwitch = ref<boolean>(false);
const closeLanguageSwitch = (val:any) => {
	showLanguageSwitch.value = val;
};

const confirmLanguageSwitch = () => {
	showLanguageSwitch.value = false;
};
// 修改时区
const showChangeZone = ref<boolean>(false);

const closeChangeZone = (val:any) => {
	showChangeZone.value = val;
};

const confirmChangeZone = () => {
	showChangeZone.value = false;
};

// 涨跌颜色弹窗
const showColorChange = ref<boolean>(false);
const closeColorChange = (val:any) => {
	showColorChange.value = val;
};
const confirmColorChange = () => {
	showColorChange.value = false;
};

// 修改基础货币
const showCurrencySettings = ref<boolean>(false);
const closeCurrencySettings = (val:any) => {
	showCurrencySettings.value = val;
};
const confirmCurrencySettings = () => {
	showCurrencySettings.value = false;
};
const clickModify = (id:string) => {
	switch (id) {
		case 'set-language':
			showLanguageSwitch.value = true;
			break;
		case 'set-timezone':
			showChangeZone.value = true;
			break;
		case 'set-color':
			showColorChange.value = true;
			break;
		case 'set-coin':
			showCurrencySettings.value = true;
			break;
		default:
			break;
	}
};

const settings = ref<any[]>([
	{
		id:"set-language",
		title:"语言",
		desc:"此项设置会影响邮件和APP推送的语言设置。"
	},
	{
		id:"set-coin",
		title:"本地货币",
		desc:"选择您的本地货币"
	},
	{
		id:"set-color",
		title:"涨跌颜色",
		desc:"选择颜色设置"
	},
	{
		id:"set-timezone",
		title:"修改时区",
		desc:"选择时区"
	}
])
</script>
